﻿<template>
  <el-container style="height: 800px; border: 0px solid #eee">
    <el-aside width="300px">
      <el-menu
        default-active="6"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <!-- 菜单栏 -->
        <router-link to="/page">
          <el-menu-item index="1"><span>表白墙</span></el-menu-item>
        </router-link>
        <router-link to="/market">
          <el-menu-item index="2"><span>跳蚤市场</span></el-menu-item>
        </router-link>
        <router-link to="/recruit">
          <el-menu-item index="3"><span>招募</span></el-menu-item>
        </router-link>
        <router-link to="/find">
          <el-menu-item index="4"><span>找搭子</span></el-menu-item>
        </router-link>
        <router-link to="/article">
          <el-menu-item index="5"><span>发帖</span></el-menu-item>
        </router-link>
        <router-link to="/person">
          <el-menu-item index="6"><span>个人中心</span></el-menu-item>
        </router-link>
      </el-menu>
    </el-aside>

    <!-- 个人简介 -->
    <el-container>
      <el-header style="text-align: right; font-size: 25px">
        <div
          style="
            position: absolute;
            left: 55%;
            transform: translateX(-50%);
            font-size: 30px;
          "
        >
          我的资料
        </div>
        <el-link icon="el-icon-edit" @click="dialogFormVisible = true"
          >编辑</el-link
        >
      </el-header>

      <!-- 编辑资料 -->
      <el-main>
        <el-dialog title="编辑资料" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="专业" :label-width="formLabelWidth">
              <el-select v-model="form.userpron">
                <el-option label="软件工程" value="软件工程"></el-option>
                <el-option label="人工智能" value="人工智能"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="个人介绍" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="form.userintro"
                maxlength="50"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </div>
        </el-dialog>

        <el-row>
          <el-col :span="10"> </el-col>
          <el-col :span="20">
            <h3 class="profile-name">{{ userInfo.name }}</h3>
            <p class="profile-bio">{{ userInfo.userProfession }}</p>
            <p class="profile-email">{{ userInfo.userIntroduce }}</p>
          </el-col>
        </el-row>
        <br /><br /><br />

        <!-- 发帖展示 -->
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="跳蚤市场" name="1">
            <div>
              <el-table :data="marketData" style="width: 100%">
                <el-table-column label="日期" width="230">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                        .toLocaleString()
                        .replace(/T/g, " ")
                        .replace(/\.[\d]{3}Z/, "")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="标题" width="200">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="
                        handleDelete(scope.$index, scope.row, 'postsmarket')
                      "
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item title="招募" name="2">
            <div>
              <el-table :data="recruitData" style="width: 100%">
                <el-table-column label="日期" width="230">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                        .toLocaleString()
                        .replace(/T/g, " ")
                        .replace(/\.[\d]{3}Z/, "")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="标题" width="200">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="
                        handleDelete(scope.$index, scope.row, 'postsrecruit')
                      "
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item title="找搭子" name="3">
            <div>
              <el-table :data="findData" style="width: 100%">
                <el-table-column label="日期" width="230">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                        .toLocaleString()
                        .replace(/T/g, " ")
                        .replace(/\.[\d]{3}Z/, "")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="标题" width="200">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="
                        handleDelete(scope.$index, scope.row, 'postsfind')
                      "
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
/* 主框架 */
.el-header {
  /* background-color: #ffffff; */
  color: #000000;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

/* 去掉下划线 */
a {
  text-decoration: none;
}

/* 个人简介 */
.profile-header {
  text-align: center;
  font-size: 20px;
}

.profile-image {
  max-width: 100%;
}

.profile-name {
  font-size: 24px;
  margin: 10px 0;
}

.profile-bio {
  font-size: 16px;
}

.profile-email {
  font-size: 14px;
  color: #666;
}

/* 个人发帖 */
.large-font {
  font-size: 16px;
}
</style>

<script>
import axios from "axios";

export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        userpron: "",
        userintro: "",
      },
      formLabelWidth: "120px",
      activeNames: ["1"],
      marketData: [],
      recruitData: [],
      findData: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleChange(val) {
      console.log(val);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row, postsname) {
      console.log(index, row, postsname);
      // 获取要删除记录的唯一标识，假设是 id
      const recordId = row.id;
      console.log(recordId);

      // 向后端发送 DELETE 请求来删除记录
      axios
        .delete(`http://localhost:8082/posts/delete/${recordId}`, {
          params: {
            postsname: postsname, // 传递 name 参数
          },
        })
        .then(() => {
          console.log(`记录 ${recordId} 已删除`);
          // 如果需要在前端刷新数据，可以在这里更新相应的数据列表
          if (postsname === "postsmarket") {
            this.marketData.splice(index, 1);
          } else if (postsname === "postsrecruit") {
            this.recruitData.splice(index, 1);
          } else if (postsname === "postsfind") {
            this.findData.splice(index, 1);
          }
        })
        .catch((error) => {
          console.error(`删除记录 ${recordId} 失败: ${error.message}`);
        });
    },
    confirm() {
      const userform = {
        id: this.userInfo.id,
        name: this.form.name,
        userProfession: this.form.userpron,
        userIntroduce: this.form.userintro,
      };

      // 发送PUT请求到后端编辑接口
      axios
        .put("http://localhost:8082/edit", userform)
        .then(() => {
          console.log("编辑成功");
        })
        .catch(() => console.log("编辑失败"));
      this.dialogFormVisible = false;
    },
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo")).data;

    // 获取个人发帖数据
    axios
      .get("http://localhost:8082/posts/page/market", {
        params: {
          userId: this.userInfo.id, // 传递用户 ID 参数
        },
      })
      .then((Response) => {
        this.marketData = Response.data;
      });

    axios
      .get("http://localhost:8082/posts/page/find", {
        params: {
          userId: this.userInfo.id, // 传递用户 ID 参数
        },
      })
      .then((Response) => {
        this.findData = Response.data;
      });

    axios
      .get("http://localhost:8082/posts/page/recruit", {
        params: {
          userId: this.userInfo.id, // 传递用户 ID 参数
        },
      })
      .then((Response) => {
        this.recruitData = Response.data;
      });
  },
};
</script>